<!--
 * @Description: 
 * @Author: zhangwei
 * @Date: 2023-03-14 22:37:32
 * @LastEditTime: 2023-03-19 22:46:11
 * @LastEditors: zw 775925302@qq.com
-->
<script lang="tsx">

import {defineComponent, unref } from 'vue'
import { useFormItemAttr , useFormItemModelValue } from "../../../use/useForm"
import request from '@/config/axios'
import { useParseParam } from "../../../use/useRequest"


export default defineComponent({
    name: 'ZwSelect',
    props: {
        schema: {
            type: Object,
            default: function () {
                return {}
            }
        },
        modelValue: {
            type: [Number, String, Array]
        }
    },
    emits: ['update:modelValue'],
    setup(props, {emit }) {

        const value = useFormItemModelValue(props, emit);

        if(props.schema.dataSource == "initNet"){
            console.log("props.schema.ajax",props.schema)
            let reqBody = useParseParam(props.schema.ajax, undefined)
            request.request(reqBody).then(([data,])=>{
                if(data){
                    props.schema.options = data
                }               
            })
        }

        //渲染options
        const renderOptions = ()=>{
            const { options = [], optionsAlias } = unref(props.schema)
            const labelAlias = optionsAlias.labelField
            const valueAlias = optionsAlias.valueField           
            return options.map(option=>{
                return (
                    <el-option label={option[labelAlias]} 
                        value={option[valueAlias]}
                        disabled={option.disabled ? option.disabled : false}>
                    </el-option>
                )
            })
        }

        return () => (
            <el-form-item {...useFormItemAttr(props.schema)}>
                <el-select vModel={value.value} {...props.schema.attrs}>
                    {{
                        default: function () {
                            return renderOptions()
                        }
                    }}
                </el-select>
            </el-form-item>
        )
    }
})
</script>

<style lang="less" scoped></style>